<template>
  <!-- vue3页面 -->
  <a-card :bordered="false">
    <p class="title">
      <span>{{ messageData?.title }}</span
      ><a-tag
        v-if="!messageData?.isApply"
        color="blue"
        style="padding: 0 5px; margin-left: 10px; font-size: 14px; height: 24px"
        >未回复</a-tag
      >
      <a-tag
        v-else
        color="green"
        style="padding: 0 5px; margin-left: 10px; font-size: 14px; height: 24px"
        >已回复</a-tag
      >
    </p>
    <p><span style="margin-right: 20px">{{messageData?.createUser}}</span>{{messageData?.createTime}}</p>
    <a-divider style="border-color: #1890ff" dashed />
    <p style="text-indent: 2em;">
      {{ messageData?.argument }}
    </p>
    <a-divider style="border-color: #1890ff" dashed />
  </a-card>
  <a-card style="margin-top: 20px" title="留言回复" v-if="messageData?.isApply">
    <a-list-item>
      <a-skeleton avatar :title="false" :loading="false" active>
        <a-list-item-meta
          :description="messageData?.apply?.applyContent"
        >
          <template #title>
            <a>{{messageData?.apply?.applyUser}} {{ messageData?.apply?.applyTime }}</a>
          </template>
          <template #avatar>
            <div
              style="
                border-radius: 50%;
                background-color: pink;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
              "
            >
              <HomeOutlined style="color: #fff; font-size: 20px" />
            </div>
          </template>
        </a-list-item-meta>
      </a-skeleton>
    </a-list-item>
  </a-card>
  <a-card style="margin-top: 20px" title="留言回复" v-if="isApply">
    <a-form
      :model="applyState"
      name="basic"
      :label-col="{ style: { width: '100px' } }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item label="回复人" name="applyUser">
        <a-input v-model:value="applyState.applyUser" />
      </a-form-item>

      <a-form-item label="回复时间" name="applyTime">
        <a-input v-model:value="applyState.applyTime" />
      </a-form-item>

      <a-form-item label="回复内容" name="回复内容">
        <a-textarea
          v-model:value="applyState.content"
          placeholder="回复内容"
          :auto-size="{ minRows: 4, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item label="&nbsp;" name="winnow" :colon="false">
        <a-checkbox v-model:checked="applyState.isWinnow"
          >设置为精选</a-checkbox
        >
      </a-form-item>
      <a-form-item label="&nbsp;" :colon="false">
        <a-button type="primary" html-type="submit">回复</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { HomeOutlined } from "@ant-design/icons-vue";
interface Props {
  isApply?: boolean;
  messageData: any;
}

withDefaults(defineProps<Props>(), {
  isApply: false,
});

const applyState = reactive({
  applyUser: "",
  applyTime: "",
  content: "",
  isWinnow: false,
});
const onFinish = () => {};
</script>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;

  span {
    font-weight: bold;
    font-size: 22px;
  }
}
:deep(svg) {
  vertical-align: middle;
}
:deep(.ant-card-head-title) {
  font-weight: bold;
}
:deep(.ant-list-item-meta-description) {
  text-indent: 2em;
}
</style>
